<template>
  <div>
      <el-container>
          <!--顶部-->
          <el-header>              
              <div  class="header">
                  <el-row>
                      <el-col :span=4 class="headerCol">
                          <el-image :src="require('../../../img/littleIcon/doctorLogo.png')"></el-image>
                      </el-col>
                      
                      <el-col :span=12 class="headerSex">
                        <el-steps :active="0" finish-status="success" simple='true'>
                            <el-step title="选择套餐" icon="el-icon-edit"></el-step>
                            <el-step title="查看套餐" icon="el-icon-edit"></el-step>
                            <el-step title="体检预约" icon="el-icon-edit"></el-step>
                        </el-steps>
                      </el-col>

                      <el-col :span=6>
                           性别： 
                          <el-select class="headerSex" placeholder="选择性别" v-model="gender" @change="sexChange">
                              <el-option label="不限" value="不限"></el-option>
                              <el-option label="男" value="男"></el-option>
                              <el-option label="女" value="女"></el-option>
                          </el-select>
                      </el-col>
                  </el-row>                  
              </div>
          </el-header>
          <el-divider></el-divider>
          <el-main>
              <div>                  
                <div @click="getSetmealItem(item)" class="mainTextDiv" v-for="(item,index) in setmeal" :key="index">
                    <el-row>
                        <el-col :span="8">
                            <!-- <el-image :src="require('../../../junM/img/'+item.img)"></el-image> -->
                            <el-image :src="require('../../../junM/img/1.png')"></el-image>
                        </el-col>
                        <el-col :span="16" class="text-col">
                            <h3>
                                {{item.name}}
                                <label style="color:red">&nbsp;&nbsp;价格：{{item.price}}&nbsp;元</label>
                            </h3>
                            <span>{{item.remark}}</span><br><br>
                            <el-tag type="danger" effect="plain" hit='true' >{{item.sex}}</el-tag>&nbsp;&nbsp;
                            <el-tag type="danger" effect="plain" hit='true' >年龄：{{item.minage}} - {{item.maxage}}</el-tag><br>
                            <el-button type="primary" icon="el-icon-search" size="mini" class="btn-check">查看</el-button>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
              </div>
          </el-main>
      </el-container>
      <router-view></router-view>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            gender:'',
            setmeal:[]            
        }
    },
    methods:{
        setmealInit(){
            axios.get("/setmeal/querySetmealAll")
            .then(res => {
                this.setmeal = res.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        sexChange(){
            axios.get("/setmeal/queryBySexAll?sex="+this.gender)
            .then(res => {
                console.log(res.data)
                this.setmeal=res.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        getSetmealItem(item){
            this.$store.commit('setmealItemInit',item)
            this.$router.push("/setmealdetail")
        }
    },
    created(){
        this.setmealInit()
    }
}
</script>

<style scoped>
    .headerSex{
        margin-top:20px;
    }
    .headerCol{
        margin-top: 10px;
        text-align: left;
    }
    .text-col{
        text-align: left;
    }
    .text-col span{
        color: black;
        font-size: 15px;
    }
    .mainTextDiv{
        cursor: pointer;
    }
    .btn-check{
        margin-left: 800px;
        /* float: right; */
    }

    
</style>